<template>
  <h1>国籍： {{ nationality }}</h1>
  <button @click="setNationnality">修改国籍</button>

  <h1>姓名： {{ person.name }}</h1>
  <h1>年龄 {{ person.age }}</h1>
  <h1>儿子：{{ person.child[0] }}</h1>
  <h1>儿子：{{ person.child[1] }}</h1>
  <button @click="setPersonName">修改姓名</button>
  <button @click="setPersonAge">修改年龄</button>
  <button @click="setPersonChildName">修改小儿子的名字</button>
</template>
<script>
import { reactive, ref, watch } from 'vue'
export default {
 name: 'App',
  setup() {
    // 定义数据
    const nationality = ref('美国')
    // 修改数据
    const setNationnality = () => {
      nationality.value = '中国'
    }
    // 监视数据
    watch(nationality, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })

    // 定义数据
    const person = reactive({
      name: '张三',
      age: 19,
      child: [
        '张小三',
        '张老三'
      ]
    })

    // 修改数据
    const setPersonName = () => {
      person.name = '李四'
    }

    const setPersonAge = () => {
      person.age++
    }

    // 监视数据
    watch(person, (newVal, oldVal) => {
      // 监视的是一个对象 newVal = oldVal
      console.log(newVal.name, oldVal.name)
    })

    // 监视某个属性
    watch(() => person.name, (newVal, oldVal) => {
      // 监视的是一个对象 newVal = oldVal
      console.log('person的name那么变化了')
    })

    const setPersonChildName = () => {
      person.child[0] = '王小三'
    }

    watch(() => person.child, (newVal, oldVal) => {
      // 监视的是一个对象 newVal = oldVal
      console.log('person的儿子的name那么变化了')
    }, {
      deep: true,
      immediate: true
    })

    // 监视多个数据
    watch([person, nationality], (newVal, oldVal) => {
      console.log(newVal[1])
      console.log(oldVal[1])
      console.log('person或者nationnality变化了')
    })

    return {
      nationality,
      setNationnality,
      person,
      setPersonName,
      setPersonAge,
      setPersonChildName
    }
  }
}
</script>